<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue2.js"></script>
  </head>
  <body>
    <div id="box">
      <ul>
        <!-- 通常情况下要设置key值，提高操作虚拟dom时diff算法的效率 -->
        <li v-for="(item,index) in dataList" :key="item.id">{{item.name}}</li>

        <!-- 在v-for指令中使用:key="item.id"来让Vue知道每个列表项的唯一标识。这样，在更新列表时，Vue就可以根据key属性值来进行精确的DOM操作，从而避免了不必要的DOM重绘和重新渲染，提高了应用程序的性能。 -->

        <!-- 一般来说若数组数据被改变就会重新构建虚拟dom树并渲染新效果 -->
        <!-- 但通过下标赋值的方法例外，为解决此问题一般有两种方案来替代 -->
        <!-- 1.通过Vue.set改变值 -->
        <!-- 2.通过splice改变值 -->
      </ul>
    </div>

    <script>
      let item = new Vue({
        el: "#box",
        data: {
          // 建立dataList
          // 数据对象中一般带有id，方便后续的维护
          dataList: [
            { name: "张三", id: 6020201123 },
            { name: "李四", id: 6020201623 },
            { name: "王五", id: 6020201883 },
          ],
        },
      });
    </script>
  </body>
</html>
